<template lang="pug">
  v-card
    v-card-title 预览
    v-card-text
      v-container
        v-data-table( :headers="headers"
          v-model="selected"
          :options.sync="options"
          :items="items"
          loading-text="数据加载中..."
          no-data-text="未找到数据"
          :server-items-length="totalItems"
          :footer-props="footerProps"
          :loading="isLoading"
        )
          template(v-slot:item.category_id='{ item }')
            span {{ getColumnValue(item, 'category.name') }}
          template(v-slot:item.sub_category_id='{ item }')
            span {{ getColumnValue(item, 'sub_category.name') }}
          template(v-slot:item.brand_id='{ item }')
            span {{ getColumnValue(item, 'brand.name') }}
          template(v-slot:item.affiliation_id='{ item }')
            span {{ getColumnValue(item, 'affiliation.name') }}
          template(v-slot:item.keeper_id='{ item }')
            span {{ getColumnValue(item, 'keeper.name') }}
          template(v-slot:item.vendor_id='{ item }')
            span {{ getColumnValue(item, 'vendor.name') }}
          template(v-slot:item.location_id='{ item }')
            span {{ getColumnValue(item, 'location.name') }}
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import mixins from '../mixins/PaginateDataTableMixin'
  import {mapActions} from 'vuex'
  import {AxiosPromise} from 'axios'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    mixins: [mixins],
    props: ['criterion'],
    methods: {
      ...mapActions('filterableBundle', { listCriterionFilterResult: 'listCriterionFilterResult' }),
      fetchData(opt: any): AxiosPromise {
        let payload = {
          id: this.criterion.id,
          data: opt
        }
        return this.listCriterionFilterResult(payload)
      },
    },
    watch: {
      criterion() {
        this.items = []
        this.refresh()
      }
    },
    data(){
      return {
        headers: [
          {text: '名称', value: 'name'},
          {text: '物品编码', value: 'product_model_number'},
          {text: '主类', value: 'category_id'},
          {text: '副类', value: 'sub_category_id'},
          {text: '品牌', value: 'brand_id'},
          {text: '归属', value: 'affiliation_id'},
          {text: '保管人', value: 'keeper_id'},
          {text: '供应商', value: 'vendor_id'},
          {text: '仓库', value: 'location_id'}
        ]
      }
    }
  })
</script>
